<template>
	<view style=" background-color: white; margin: 10rpx auto; ">
		<view style=" padding: 0rpx 15rpx;">


			<u-form :label-width='100'>
				<u-form-item label="车牌号"><u-input  @focus='CarNumberSelect' v-model="model.vehicleNo" type='select'
						placeholder="请选择车辆号牌" /></u-form-item>
				<u-form-item label="收费金额">
					<u-input v-model='model.chargeInfo.actualMoney' placeholder="请输入金额" />
				</u-form-item>
				<u-form-item label="支付方式">


					<u-radio-group v-model="model.chargeInfo.payType" @change="payTypeChange">
						<u-radio n1ame="现金支付">
							现金支付
						</u-radio>
						&nbsp;&nbsp;
						<u-radio :disabled="true" name="在线支付">
							在线支付
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label='入场照片'>
					<view class="u-page__upload-item">
						<u-upload ref='uploadItem' accept="image" :capture="['album', 'camera']" @afterRead="afterRead"  name="6"
							:auto-upload='true' :maxCount="1" width="250" height="150">
							<image :src="getAllPath(model.picId)" mode="widthFix" style="width: 250px;height: 150px;"></image>
						</u-upload>
					</view>
				</u-form-item>
				<u-form-item label="入场时间">
					<u-input :disabled="true" type='select' v-model='model.addtime' placeholder="请选择入场时间" />
				</u-form-item>
			</u-form>
			<view>
				<h2 style="font-size:18px;margin: 10px 0px; border-left: 4px solid #55557f; padding-left: 10px;">联系信息选填
				</h2>
			</view>
			<u-form :label-width='100'>
				<u-form-item label="姓名"><u-input v-model="model.driverName" type='select'
						placeholder="请输入车主姓名" /></u-form-item>
				<u-form-item label="联系电话">
					<u-input @click='citySelect' type='select' v-model='model.phoneNum' placeholder="请输入车辆联系电话" />
				</u-form-item>
				<u-form-item label="简介" prop="intro" borderBottom ref="item3">
					<u--textarea placeholder="请输入备注" v-model="model.remarks" count></u--textarea>
				</u-form-item>
			</u-form>
			<u-gap height="50" bgColor="#fff"></u-gap>
			<view>


			</view>

		</view>


		<u-keyboard :mode="keyData.mode" :dotDisabled="keyData.dotDisabled" :random='keyData.random' :show="show"
			@close="keyboardClose" @cancel="keyboardCancel" @confirm="keyboardConfirm" @change="keyboardChange"
			@backspace="keyboardBackspace"></u-keyboard>


		<view @click="Save"
			style=" background-color: rgb(17,71,131); position: fixed; z-index: 9999; bottom: 0; width: 100%;
				color: white; font-weight: bold; height: 100rpx; line-height: 100rpx; text-align: center; font-size : 40rpx; border-radius: 2px; ">

			保存</view>




	</view>
	</view>
</template>

<script>
	import service from '@/util/service.js'
	import pub from '@/util/public.js'

	export default {
		data() {
			return {
				show: false,
				Authorization: service.getAuthorization(),
				action: service.API_URL + "/admin/file/UploadPic/",
				keyData: {
					mode: '',
					dotDisabled: false,
					random: false,
				},
				model: {
					picId:"",
					vehicleNo: "湘A",
					chargeInfo: {
						status:0,
						payType: "现金支付",
						actualMoney: 200
					},
					addtime: "2023-10-25 12:33:23"
				}
			}
		},
		onLoad: function() {
			this.model.addtime = pub.formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')
		},
		methods: {
			getAllPath:function(path){
				if(!path){
					
					return "/static/car.png";
				}
				return service.BASE_URL+path;
			},
			afterRead: function(file, lists, name) {

				this.uploadFileToServer(file);

			},
			uploadFileToServer(file, num) {
				console.log('fli', file);
				let that = this;
				var filePath="";
				if(file.file.url){
					filePath=file.file.url;
				}else{
					filePath=file.file[0].url;
				}
				uni.uploadFile({
					// 上传服务器
					url: that.action, // 上传服务器的接口地址
					header:
						{Authorization:that.Authorization}
					,
					
					filePath: filePath, // 要上传的文件路径
					name: 'file', // 文件对应的 key 值，服务器端用于获取文件的字段名
					formData: {
						ChannelName: "entrance" // 上传文件的类型，此处为示例值，您可以根据实际需要设置
						// file: file.file.url // 上传文件的字段名，此处为示例值，您可以根据实际需要设置
					},
					success: (res) => {
						console.log(res);
					var result=JSON.parse(	res.data);
					if (result.code == 1) {
						this.model.picId = result.data.path;
					} else {
						uni.showToast({
							title: result.msg
						})
					}
					},
					fail: (err) => {
						// 上传失败的回调处理
						console.error('上传失败', err);
					}
				});
			},

			Save: function() {
				if (this.model.vehicleNo.length != 7&&this.model.vehicleNo.length!=8) {
					uni.showModal({
						title: "系统提示",
						content: "请输入完整车牌号码！"
					})
					return;
				}

				if (!this.model.chargeInfo.actualMoney) {
					uni.showModal({
						title: "系统提示",
						content: "缴费金额不能为空！"
					})
					return;
				}
				var model = JSON.parse(JSON.stringify(this.model));
				model.chargeInfo.payType = 20;
				uni.showLoading({
					title: "数据提交中..."
				})


				service.postJson('/biz/entrance/Add', model, function(res) {


					uni.hideLoading();


					if (res.code == 1) {
						uni.showModal({
							title: "恭喜，操作成功",
							content: "车辆入场已经登记！",
							showCancel: false,
							success: (res1) => {


								if (res1.confirm) {
									uni.redirectTo({
										url: "/pages/index/index"
									})
								}
							}
						})

					} else {
						uni.showModal({
							title: "操作失败",
							content: res.msg,
							showCancel: false
						})
					}
				})

			},
			CarNumberSelect: function() {
				console.log(123);
				uni.showToast({
					title: "test"
				})
				this.keyData = {
					mode: '',
					dotDisabled: false,
					random: false,
				}
				this.show = true;
			},
			keyboardClose: function() {
				this.show = false;
			},
			keyboardCancel: function() {
				this.show = false;
			},
			keyboardConfirm: function() {
				this.show = false;
			},
			keyboardChange: function(val) {
				console.log(val);
				this.model.vehicleNo += val;
			},
			keyboardBackspace: function() {

				if (this.model.vehicleNo) this.model.vehicleNo = this.model.vehicleNo.substr(0, this.model.vehicleNo -
					1);


				// 		console.log("back,",this.model.vehicleNo);
				// var cut=	this.model.vehicleNo.substr(0,this.model.vehicleNo.length-1)
				// 	console.log(cut)
			}
		}
	}
</script>

<style>

</style>